<template>
    <div>
        <Card title="基本信息"
              :bordered="false"
              dis-hover
              class="ivu-mt">
            <DescriptionList>
                <Description term="订单编号：">ORDER201910130000000333</Description>
                <Description term="订单状态：">等待买家付款</Description>
                <Description term="订单类型：">实物订单</Description>
                <Description term="下单时间：">2019-10-13 15:19:31</Description>
                <Description term="买家名称：">13871264783</Description>
            </DescriptionList>
            <DescriptionList :col="1">
                <Description term="买家留言：">一定要寄邮政，其他快递收不到一定要寄邮政，其他快递收不到一定要寄邮政，其他快递收不到一定要寄邮政，其他快递收不到一定要寄邮政，其他快递收不到</Description>
            </DescriptionList>
        </Card>
        <Card :bordered="false"
              dis-hover
              class="ivu-mt i-table-no-border">
            <DescriptionList title="收货人信息">
                <Description term="收货人：">huizi</Description>
                <Description term="收货地址：">北京>北京市>东城区>wwwww</Description>
                <Description term="手机号码：">13899999999</Description>
            </DescriptionList>
            <Divider />
            <DescriptionList title="商户信息">
                <Description term="商户：">qwcs2新商</Description>
                <Description term="联系方式：">0538-5648675</Description>
            </DescriptionList>
            <Divider />
            <DescriptionList title="配送及支付方式">
                <Description term="支付方式：">微信支付</Description>
                <Description term="配送方式：">快递方式</Description>
                <Description term="配送费：">&yen;10</Description>
            </DescriptionList>
        </Card>
        <Card title="采购明细"
              :bordered="false"
              dis-hover
              class="ivu-mt">
            <Table :columns="columns"
                   :data="tableData">
                <template slot-scope="{ row }"
                          slot="productName">
                    <Row>
                        <Col span="5">
                        <Avatar shape="square"
                                :src="row.imgUrl"
                                size="large" />
                        </Col>
                        <Col span="19">{{ row.productName }}</Col>
                    </Row>
                </template>
            </Table>
            <div class="order-price ivu-mt">
                商品总金额：
                <b>¥1143.00</b> + 配送费：
                <b>¥10.00</b> - 单品优惠：
                <b>¥0.00</b> - 店铺优惠：
                <b>¥0.00</b> = 应付总金额：
                <b>¥1153.00</b>
            </div>
        </Card>
        <Card title="订单日志"
              :bordered="false"
              dis-hover
              class="ivu-mt">
            <Table :columns="columnsLog"
                   :data="tableDataLog"></Table>
        </Card>
    </div>
</template>
<script>
    export default {
        name: 'view',
        data () {
            return {
                columns: [
                    {
                        title: '商品名称',
                        slot: 'productName',
                        minWidth: 300
                    },
                    {
                        title: 'SKU编号',
                        key: 'skuNo',
                        minWidth: 140
                    },
                    {
                        title: '商品规格',
                        key: 'guige',
                        minWidth: 240
                    },
                    {
                        title: '商品数量',
                        key: 'num',
                        minWidth: 100,
                        align: 'center'
                    },
                    {
                        title: '商城价',
                        key: 'shopPrice',
                        minWidth: 100,
                        align: 'center'
                    },
                    {
                        title: '购买价',
                        key: 'buyPrice',
                        minWidth: 100,
                        align: 'center'
                    }
                ],
                tableData: [
                    {
                        productName:
                            '喜临门 3D椰棕床垫 邦尼尔弹簧床垫 席梦思床垫 极光白',
                        skuNo: 'SKU00004',
                        guige: '床垫规格：100cm*190cm',
                        num: 6,
                        shopPrice: 6,
                        buyPrice: 6,
                        imgUrl:
                            'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
                    },
                    {
                        productName:
                            '喜临门 3D椰棕床垫 邦尼尔弹簧床垫 席梦思床垫 极光白',
                        skuNo: 'SKU00004',
                        guige: '床垫规格：100cm*190cm',
                        num: 6,
                        shopPrice: 6,
                        buyPrice: 6,
                        imgUrl:
                            'https://dev-file.iviewui.com/userinfoYLhfo1S945BOLuFT96NRStYeYDFRviF5/avatar'
                    },
                    {
                        productName:
                            '喜临门 3D椰棕床垫 邦尼尔弹簧床垫 席梦思床垫 极光白',
                        skuNo: 'SKU00004',
                        guige: '床垫规格：100cm*190cm',
                        num: 6,
                        shopPrice: 6,
                        buyPrice: 6,
                        imgUrl:
                            'https://dev-file.iviewui.com/userinfoxlXwHVwZkCQtl1Zyd1wrvF78b1rZkhfK/avatar'
                    },
                    {
                        productName:
                            '喜临门 3D椰棕床垫 邦尼尔弹簧床垫 席梦思床垫 极光白',
                        skuNo: 'SKU00004',
                        guige: '床垫规格：100cm*190cm',
                        num: 6,
                        shopPrice: 6,
                        buyPrice: 6,
                        imgUrl:
                            'https://dev-file.iviewui.com/userinfosvaY5tb7yfnSFTTimcjy3vuSG6RC28v2/avatar'
                    },
                    {
                        productName:
                            '喜临门 3D椰棕床垫 邦尼尔弹簧床垫 席梦思床垫 极光白',
                        skuNo: 'SKU00004',
                        guige: '床垫规格：100cm*190cm',
                        num: 6,
                        shopPrice: 6,
                        buyPrice: 6,
                        imgUrl:
                            'https://dev-file.iviewui.com/userinforaP8NeQgYpmKgkpWlqZP7rfewbHiIzJY/avatar'
                    }
                ],
                columnsLog: [
                    {
                        title: '操作类型',
                        key: 'type',
                        minWidth: 120
                    },
                    {
                        title: '操作人',
                        key: 'user',
                        minWidth: 120
                    },
                    {
                        title: '操作时间',
                        key: 'time',
                        minWidth: 120
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        minWidth: 120
                    }
                ],
                tableDataLog: [
                    {
                        type: '提交订单',
                        user: 'qwang',
                        result: 1,
                        time: '2019-07-28 09:41:00',
                        remark: '-'
                    },
                    {
                        type: 'Leader 初审',
                        user: '中小鱼',
                        result: 0,
                        time: '2019-07-28 09:41:00',
                        remark: '不予通过'
                    },
                    {
                        type: '财务审核',
                        user: '唐不苦',
                        result: 1,
                        time: '2019-07-28 09:41:00',
                        remark: '通过'
                    },
                    {
                        type: '提交订单',
                        user: '甜筒',
                        result: 1,
                        time: '2019-07-28 09:41:00',
                        remark: '-'
                    }
                ]
            };
        }
    }
</script>
<style lang="less" scoped>
</style>
